<?php $this->start_element('nextgen_gallery.gallery_container', 'container', $displayed_gallery); ?>
	<div class='ngg-imagebrowser' id='<?php echo $anchor; ?>' data-nextgen-gallery-id="<?php echo $displayed_gallery->id(); ?>">

    <!-- <h3><?php echo esc_attr($image->alttext); ?></h3> -->

		<?php
		
		$template_params = array(
				'index' => 0,
				'class' => 'pic',
				'image' => $image,
			);
			
		$this->include_template('photocrati-nextgen_gallery_display#image/before', $template_params);
		
		?>
<!--         <a href='<?php echo esc_attr($storage->get_image_url($image, 'full', TRUE)); ?>'
           title='<?php echo esc_attr($image->description); ?>'
           data-src="<?php echo esc_attr($storage->get_image_url($image)); ?>"
           data-thumbnail="<?php echo esc_attr($storage->get_image_url($image, 'thumb')); ?>"
           data-image-id="<?php echo esc_attr($image->{$image->id_field}); ?>"
           data-title="<?php echo esc_attr($image->alttext); ?>"
           data-description="<?php echo esc_attr(stripslashes($image->description)); ?>"
           <?php echo $effect_code ?>> -->
            <img title='<?php echo esc_attr($image->alttext); ?>'
                 alt='<?php echo esc_attr($image->alttext); ?>'
                 src='<?php echo esc_attr($storage->get_image_url($image, 'full', TRUE)); ?>'/>
        <!-- </a> -->
	  <?php

		$this->include_template('photocrati-nextgen_gallery_display#image/after', $template_params);

		?>
    <div class="ngg-imagebrowser-desc">
      <?php if(strlen(trim($image->description))){?><p><?php echo esc_attr($image->description); ?></p><?php } ?>
    </div>
    <div class='ngg-imagebrowser-nav'>

        <div class='back'>
            <a class='ngg-browser-prev'
               id='ngg-prev-<?php echo $previous_pid; ?>'
               href='<?php echo $previous_image_link; ?>'>
                &#9668;上一张
            </a>
        </div>

        <div class='next'>
            <a class='ngg-browser-next'
               id='ngg-next-<?php echo $next_pid; ?>'
               href='<?php echo $next_image_link; ?>'>
                下一张
                &#9658;
            </a>
        </div>

        <div class='counter'>
           <em id="number"> <?php echo $number; ?></em> <?php _e('of', 'nggallery'); ?> <span id="total"><?php echo $total; ?></span>
        </div>

<!--         <div class='ngg-imagebrowser-desc'>
            <p>
                <?php echo $image->description; ?>
            </p>
        </div> -->

    </div>

</div>
<?php $this->end_element(); ?>
<!-- 获取下一篇图集 -->
<?php $next_post = get_next_post(true);   
   if (!empty( $next_post )):?>
   <input type="hidden" id="nextpost_link" value="<?php echo get_permalink( $next_post->ID ); ?>">
<?php endif;?>
<script type='text/javascript'>
	jQuery(function($) {
    var previous_link = "<?php echo $previous_image_link; ?>";
    var next_link = parseInt($('#number').text())<parseInt($('#total').text())?"<?php echo $next_image_link; ?>":($('#nextpost_link').length?$('#nextpost_link').val():"<?php echo $next_image_link; ?>");

    $('.ngg-imagebrowser .pic').on('mousemove',function(e){
      var $pic = $(this)
          ,pic_left = $pic.offset().left
          ,pic_width = $pic.width()
          ;
      if(e.pageX>pic_left+pic_width/2){ //right cursor
        if(!$pic.hasClass('cursor-right')){
          $pic.removeClass('cursor-left').addClass('cursor-right')
        }
      }else{  //left cursor
        if(!$pic.hasClass('cursor-left')){
          $pic.removeClass('cursor-right').addClass('cursor-left')
        }
      } 
    });
    $('.ngg-imagebrowser .pic').on('click',function(){
      var $pic = $(this);
      if($pic.hasClass('cursor-left')){  //上一张图片
        location.href = previous_link;
      }else{  //下一张图片
        location.href = next_link;
      }
    });
		//new NggPaginatedGallery('<?php echo $displayed_gallery->id() ?>', '.ngg-imagebrowser');
	});
</script>